<template>
	<div class="pg-page thePage flex-column">
		<div class="title">顶岗实习</div>
		<div class="pg-login flex-1 flex-column flex-center overflow-y">
			<div class="box-login ">
				<cube-tab-bar v-model="curTabIndex">
					<cube-tab v-for="(item, i) in tabs" :value="i" :key="i" :label="i">
						<div class="text">{{ item.label }}</div>
						<div class="flex_center mt8" v-show="curTabIndex === i" :class="`icon${i}`"></div>
					</cube-tab>
				</cube-tab-bar>
				<cube-tab-panels v-model="curTabIndex">
					<cube-tab-panel v-for="(item, i) in tabs" :value="i" :key="i" :label="i">
						<div class="input-login flex-column">
							<div class="user-name-label">{{ item.userNameLabel }}</div>
							<div class="user-name-input"><input type="text" v-model="userName" /></div>
							<div class="password-label">密码</div>
							<div class="password-input"><input type="password" v-model="password" /></div>
						</div>
					</cube-tab-panel>
				</cube-tab-panels>
			</div>
			<div class="btn-login" @click="onLogin">登录</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Login',
	components: {},
	data() {
		return {
			curTabIndex: 0,
			tabs: [
				{
					value: 1,
					label: '学生',
					userNameLabel: '学号',
					routeName: 'studentHome'
				},
				{
					value: 2,
					label: '企业',
					userNameLabel: '企业名称',
					routeName: 'enterpriseHome'
				},
				{
					value: 3,
					label: '指导老师',
					userNameLabel: '教工号',
					routeName: 'teacherHome'
				}
			],

			userName: '2020808608',
			password: '123456'
		};
	},

	methods: {
		onLogin() {
			const routeName = this.tabs[this.curTabIndex].routeName;
			console.log('onLogin routeName:' + routeName);
			if (routeName) {
				this.$router.push({ name: this.tabs[this.curTabIndex].routeName });
			}
		}
	}
};
</script>

<style lang="less" scoped>
.pg-page {
	background-image: url('~@/pics/background.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.title {
	margin-top: 80px;
	height: 30px;
	font-size: 30px;
	color: #ffffff;
	text-align: center;
	letter-spacing: 10px;
}

.pg-login {
	margin-top: 40px;
	.box-login {
		height: 240px;
		width: 85%;
		box-shadow: 0px 5px 30px 0px rgba(255, 182, 90, 0.59);
		border-radius: 15px;
	}
	.btn-login {
		margin-top: 60px;
		width: 183px;
		height: 41px;
		background: #fe921e;
		box-shadow: 0px 5px 12px 0px rgba(254, 146, 30, 0.59);
		border-radius: 20px;
		font-size: 18px;
		color: #ffffff;
		text-align: center;
		line-height: 41px;
		letter-spacing: 10px;
	}
}

.cube-tab-bar {
	align-items: flex-start;
}

.cube-tab {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	.text {
		font-size: 16px;
		font-weight: 500;
		color: #626262;
	}
	.icon0 {
		width: 24px;
		height: 6px;
		background: #fd8a23;
		border-radius: 3px;
		position: relative;
		&::before {
			content: '';
			width: 6px;
			height: 6px;
			background: #fd8a23;
			border-radius: 3px;
			position: absolute;
			left: -8px;
		}
	}
	.icon1 {
		width: 30px;
		height: 6px;
		background: #fd8a23;
		border-radius: 3px;
	}
	.icon2 {
		width: 24px;
		height: 6px;
		background: #fd8a23;
		border-radius: 3px;
		position: relative;
		&::after {
			content: '';
			width: 6px;
			height: 6px;
			background: #fd8a23;
			border-radius: 3px;
			position: absolute;
			right: -8px;
		}
	}
}

.input-login {
	margin: 0 30px;
	.user-name-label {
		margin: 35px 10px 0 10px;
		// width: 48px;
		height: 12px;
		font-size: 12px;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #b0b0b0;
	}
	.user-name-input {
		margin: 8px 10px;
		// width: 147px;
		height: 18px;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #3a3a3a;
		border-bottom: 1px solid #e7e7e7;
	}
	.password-label {
		margin: 20px 10px 0 10px;
		// width: 48px;
		height: 12px;
		font-size: 12px;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #b0b0b0;
	}
	.password-input {
		margin: 8px 10px;
		// width: 147px;
		height: 18px;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #3a3a3a;
		border-bottom: 1px solid #e7e7e7;
	}
}
</style>